<template>
	<view class="content">
		<view class="input-box">
			<textarea class="input" placeholder="输入申请内容~" v-model="userFrom.messgae" />
		</view>
		<view class="btn-box">
			<view class="btn" @click="getShenqing()">
				申请加入邀约~
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		reactive,
		ref
	} from 'vue'
	import {
		getJoinZhaomu
	} from '@/api/yaoyue_api.js'

	const userFrom = reactive({
		messgae: '',
		openid: '',
		zhaomuid: ''
	})

	const getShenqing = () => {
		console.log('加入招募数据', userFrom);

		if (userFrom.messgae.length >= 14) {
			uni.showModal({
				title: '提示',
				content: '最大字数限制为14个字'
			})
		} else if (userFrom.messgae.length == 0) {
			uni.showModal({
				title: '提示',
				content: '不可输入为空哦'
			})
		} else {
			getJoinZhaomu(userFrom.openid, userFrom.zhaomuid, userFrom.messgae).then((res) => {
				if (res.result == '已申请') {
					uni.showModal({
						title: '提示',
						content: '已经提交申请，请等待同意',
						success() {
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}
					})

				} else {
					uni.showModal({
						title: '警告',
						content: '出现错误，请联系管理员',
						success() {

						}
					})
				}
				console.log(res);
			})
		}
	}


	onLoad((res) => {
		userFrom.zhaomuid = res.id
		uni.getStorage({
			key: 'openid',
			success(res2) {
				userFrom.openid = res2.data.openid
			}
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		.input-box {
			display: flex;
			justify-content: center;
			padding-top: 40rpx;

			.input {
				padding: 20rpx;
				border-radius: 10rpx;
				height: 400rpx;
				width: calc(100vw - 80rpx);
				border: 1rpx solid gainsboro;
			}
		}


		.btn-box {
			position: fixed;
			bottom: 0;
			padding: 20rpx 20rpx 40rpx 20rpx;

			.btn {
				text-align: center;
				color: white;
				padding: 40rpx;
				width: calc(100vw - 120rpx);
				background-color: #53c3ff;
				border-radius: 20rpx;
			}
		}
	}
</style>